<template>
  <div class="index-container">
    <div class="content-item">
      <div class="content-item-left">工单号：</div>
      <div class="content-item-right">{{no}}</div>
    </div>
    <div class="content-item">
      <div class="content-item-left">医院名称：</div>
      <div class="content-item-right">{{hospital_name}}</div>
    </div>
    <div class="mail-title"><span class="require">*</span> 收件人信息：</div>
    <div class="content-item">
      <van-field v-model="name" :disabled="status==2" label="姓名：" placeholder="请输入姓名" />
    </div>
    <div class="content-item">
      <van-field v-model="mobile" :disabled="status==2" label="联系电话：" placeholder="请输入联系电话" />
    </div>
    <div class="content-item">
      <van-field v-model="address" :disabled="status==2" label="地址：" placeholder="请输入地址" />
    </div>
    <div class="mail-title"><span class="require">*</span> 沟通反馈：</div>
    <van-field
      v-model="feedback"
      :disabled="status==2"
      rows="6"
      autosize
       class="texterea"
      label=""
      type="textarea"
      maxlength="500"
      placeholder="请输入问题描述"
      show-word-limit
    />
    <div class="speedbtn" @click="confirmMail">提交申请</div>
    <div class="tcmb" v-if="showConfirm"></div>
    <div class="tc" v-if="showConfirm">
      <img v-if="status == 2" src="../../../static/success.png" alt="">
      <img v-else src="../../../static/error.png" alt="">
      <div class="tc-tittle">{{status == 2 ? '审核通过' : '审核未通过'}}</div>
      <div class="tc-tips">{{status == 2 ? '您的邮寄维修已通过审核, 请通知AD专员完成邮寄' : '您的邮寄维修未通过审核,请查看填报信息是否正确完整'}}</div>
      <div class="tc-btn" @click="closeConfirm">确定</div>
    </div>
  </div>
</template>
<script>
import {postApply, remoteDetail} from '@/api/home.js'
export default {
  data() {
    return {
      no: '',
      hospital_name: '',
      name: '',
      mobile: '',
      address: '',
      feedback: '',
      status: 1,//1未审核  2审核通过 3驳回
      showConfirm: false
    }
  },

  mounted() {
    this.no = this.$route.query.no
    this.hospital_name = decodeURIComponent(this.$route.query.hospital_name)
    this.getMailInfo()
  },

  methods: {
    closeConfirm() {
      this.showConfirm = false
    },
    getMailInfo() {
      remoteDetail({no:this.no}).then((res) => {
        if (res.err_code === 200) {
          this.name = res.data.name
          this.mobile = res.data.mobile
          this.address = res.data.address
          this.feedback = res.data.feedback
          this.status = res.data.status
          if (res.data.status === 2 || res.data.status === 3){
            this.showConfirm = true
          }
        }
      }).catch((e) => { console.log(e) })
    },
    confirmMail() {
      if (!this.no) {
        this.$notify({ type: 'danger', message: '工单异常，请重新进入' })
        return
      }
      if (!this.name) {
        this.$notify({ type: 'danger', message: '请输入姓名' })
        return
      }
  
      var mobileReg = /^[1][3-9][\d]{9}/;
      if(!mobileReg.test(this.mobile)){
        this.$notify({ type: 'danger', message: '请填写正确手机号' })
        return
      }
      if (!this.address) {
        this.$notify({ type: 'danger', message: '请输入地址' })
        return
      }
      if (!this.feedback) {
        this.$notify({ type: 'danger', message: '请输入沟通反馈' })
        return
      }
      let params = {
        no: this.no,
        feedback: this.feedback,
        name: this.name,
        mobile: this.mobile,
        address: this.address
      }
      postApply(params).then((res) => {
        this.$notify({ type: 'success', message: '申请成功' })
        setTimeout(()=>{
          this.$router.go(-1)
        },1000)
      }).catch((e) => { console.log(e) })
    }
  }
}
</script>


<style scpoed>
.index-container{
  padding: 20px 15px;
}
.speedbtn{
  width: 250px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
}
.content-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 6px;
}
.content-item-left{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #99A0A6;
}
.content-item-right{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.mail-title{
  margin-top: 14px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  margin-bottom: 14px;
}
.content-info{
  width: 100%;
  background: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 17px;
}
.content-info-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.content-info-item-left{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.content-info-item-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  text-decoration: underline;
  color: #A82025;
}
.content-info-item-right img{
  width: 15px;
  height: 15px;
  margin-right: 7.5px;
}
.mailimg{
  margin-bottom: 0px;
}
.tcmb{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 100;
}
.tc{
  position:fixed;
  z-index:101;
  top: 50%;
  left: 50%;
  /*transform: translateX(-50%);*/
  transform: translate(-50%,-60%);
  width: 345px;
  height: 275px;
  background: #FFFFFF;
  border-radius: 10px;
}
.tc img{
  width: 63px;
  height: 63px;
  display: block;
  margin: 0 auto;
  margin-top: 28px;
}
.tc-tittle{
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}
.tc-tips{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989898;
  margin: 0 auto;
  margin-top: 11px;
  text-align: center;
  width: 181px;
  line-height: 17px;
}
.tc-btn{
  width: 94px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 33px;
}
.require{
  color: #FF3737;
}
</style>





<style lang="scss">
html,body{
  width:100%;
  height:100%;
  background-color: #f4f4f4 ;
}

.content-item
.van-field__control{
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
}
.van-field__label{
  font-size:15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #99A0A6;
}
.van-cell{
  padding: 0;
}
.texterea .van-field__control{
  text-align: left;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
}
.texterea{
  padding: 15px;
}
.texterea .van-field__word-limit{
  color: #ccc;
}
</style>
